{% extends "base.html" %}

{% block content %}
<div class="row">
	<div class="slider-wrapper col-md-9 hidden-xs">
		<div class="slider-holder">
			<div id="slider" class="nivoSlider">
				<img class="img-responsive" src="images/3DSport.jpg" title="#sports-caption" alt="" />
				<img class="img-responsive" src="images/football.jpg" title="#football-caption" alt="" />
			    <img class="img-responsive" src="images/hurling.jpg" title="#hurling-caption" alt="" />
			    <img class="img-responsive" src="images/lobby.jpg" title="#lobby-caption" alt="" />
			    <img class="img-responsive" src="images/cricket.jpg" title="#cricket-caption" alt="" />
			    <img class="img-responsive" src="images/overview.png" title="#overview-caption" alt="" />
			    <img class="img-responsive" src="images/goalie.jpg" title="#goalie-caption" alt="" />
			</div>
		</div>
		<div class="hidden-xs">
			<div id="sports-caption" class="nivo-html-caption red">
			    <p>
				    <span>ten different sports</span>
				    <span>to test your skills</span>
			    </p>
			</div>
			<div id="football-caption" class="nivo-html-caption">
				<p>
				    <span>fun day out for</span>
				    <span>the whole family</span>
			    </p>
			</div>
			<div id="hurling-caption" class="nivo-html-caption">
			   <p>
				    <span>try place on</span>
				    <span>our leaderboard</span>
			    </p>
			</div>
			 <div id="lobby-caption" class="nivo-html-caption">
			    <p>
				    <span>compete against your</span>
				    <span>friends and other players</span>
			    </p>
			</div>
			<div id="cricket-caption" class="nivo-html-caption">
			    <p>
				    <span>non-contact</span>
				    <span>and competitive</span>
			    </p>
			</div>
			<div id="overview-caption" class="nivo-html-caption">
			    <p>
				    <span>cafe pool and tuck</span>
				    <span>shop on premise</span>
			    </p>
			</div>
			<div id="goalie-caption" class="nivo-html-caption">
				<p>
				    <span>all skill sets</span>
				    <span>catered for</span>
			    </p>
			</div>
		</div>
	</div>
	<div class="col-md-3 text-center">
		<h2 style="color:green">Summer Special</h2>
		<img class="img-responsive" style="display:inline" src="images/sun.gif"/>
		<h4 style="color:green">€10 per person everyday</h4>
	</div>
</div>
<div class="row" id="main-content">
	<h2>About Kingdom of Sports</h2>
	<div class="row content-row">
		<div class="col-md-8">
			<div id="intro">
				
				<p>	<span style="font-weight:bold">Kingdom of Sports</span> is a leisure activity open to all ages and level of ability, while the more advanced sports person can hone their skills in this fully equipped indoor facility.<br/><br/>
					The Arena contains 10 different sports all in their own self contained sections with slopped floors and conveyor belts to return all equipment as needed.<br/><br/>
					Every score of the required skill for each sport will gain the competitor a “Kingdom of Sports” point, with total points calculated once the circuit is complete to determine the Kingdom of Sports Champion!<br/><br/>
					Competitors can then see how they compare to friends, work colleagues, class mates or even the “Kingdom of Sports” leader board<br/><br/>
					</p>
					<h4 class="sports text-center">Do you have that Friend that can run a marathon in an hour, bound over mountains in one leap etc etc!!</h4>
					<p class="sports text-center" style="font-weight:bold;">Well that won’t help them in this skill based activity!</p>
			</div>
		</div>
		<div class="col-md-4">
			<div id=blurb>
				<p class="sports">
				Kingdom of Sports caters for all individuals & groups.
				So if you are looking for:</p>
				<ul>
					<li><p class="sports">A fun family day out with the kids </p></li>
					<li><p class="sports">Full or half day <a href="/Packages">School Tours</a></p></li>
					<li><p class="sports">That memorable <a href="/Packages">Hen / Stag</a> activity</p></li>
					<li><p class="sports">Team bonding for <a href="/Packages">Corporate or Club</a> groups</p></li>
				</ul>	 
				<p  class="sports text-center">                                                                              
				<br/><span style="font-weight:bold">or</span> <br/>
				Just want to embarrass your friends and prove you are the best all rounded sports competitor?<br/>
				<br/><span style="font-weight:bold">then</span><br/></p>
				<h4 class="sports text-center" style="text-align:center;font-style:italic;color:whitesmoke;">Kingdom of Sports</h4>
			</div>	
		</div>
	</div>
	<div class="row content-row">
		<div class='col-md-4 text-center'>
			<h3 style="color:#056B3A;"> Men's Leaderboard</h2>
			<div class="table-responsive leader-table">
				<table class="table">
					<thead>
					<tr>
						<td>Place</td>
						<td>Name</td>
						<td>Score</td>
					</tr>
					</thead>
		  			<tbody id='men-leader-table-body'></tbody>
				</table>
			</div>
		</div>
		<div class='col-md-4 text-center'>
			<h3 style="color:#056B3A;"> Women's Leaderboard</h2>
			<div class="table-responsive leader-table">
				<table class="table">
					<thead>
					<tr>
						<td>Place</td>
						<td>Name</td>
						<td>Score</td>
					</tr>
					</thead>
		  			<tbody id='women-leader-table-body'></tbody>
				</table>		
			</div>
		</div>
		<div class="col-md-4 text-center">
			<h5>Former high scorer batting in the cages!</h5>
			<iframe width="300" height="255" src="//www.youtube.com/embed/VnKh4wbT-zE" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
</div>
{% endblock %}
{% block javascript %}
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
	$( document ).ready(function() {
		$.ajax({
			   type: 'GET',
			   url: '/GetMenLeaderBoard',
			   dataType : 'json',
			   success : function(resp) 
			             {
				   			leaderboardRow = '';
				   			$.each(resp, function() {
				   				leaderboardRow += '<tr><td>'+this.position+'.</td><td>'+this.name+'</td><td>'+this.score+'</td></tr>';
				   		    });
				   			
				   			$('#men-leader-table-body').html(leaderboardRow)
			             }
			   });
				$.ajax({
					   type: 'GET',
					   url: '/GetWomenLeaderBoard',
					   dataType : 'json',
					   success : function(resp) 
					             {
						   			leaderboardRow = '';
						   			$.each(resp, function() {
						   				leaderboardRow += '<tr><td>'+this.position+'.</td><td>'+this.name+'</td><td>'+this.score+'</td></tr>';
						   		    });
						   			
						   			$('#women-leader-table-body').html(leaderboardRow)
					             }
					   });
	});
	$(window).load(function() {
		$('#slider').nivoSlider({
		    effect: 'fold',            
		    animSpeed: 500,                
		    pauseTime: 4000,               
		    startSlide: 0,                  
		    directionNav: false,          
		    controlNav: false,        
		    pauseOnHover: true, 
		    });
	});
</script>
{% endblock %}